<template>
  <div class="sleep">
    <div class="wrapper">
      <div class="breath"></div>
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link to="/home" tag="a"
            ><img :src="require('../assets/img/su_back.webp')" alt=""
          /></router-link>
        </div>
        <div class="header_center">哄睡</div>
        <div class="header_right">
          <!-- <a href="">分类</a> -->
        </div>
      </div>
      <!-- 头部 end   -->

      <!-- 听数量 star  -->
      <div class="listenNum">
        <p>165520人听过</p>
      </div>
      <!-- 听数量 end   -->

      <!-- 底部播放 star  -->
      <div class="play">
        <ul>
          <li>
            <div class="img" @click="change">
              <img :src="require('../assets/img/ic_change.webp')" alt="" />
            </div>
            <p>换一换</p>
          </li>
          <li>
            <div class="player" @click="playsleep">
              <img :src="require('../assets/img/icon_w_pasue.webp')" alt="" v-show="!iconPlay" />
              <img :src="require('../assets/img/ic_help_sleep_play.webp')" alt="" v-show="iconPlay" />
            </div>
          </li>
          <li>
            <div class="img">
              <img :src="require('../assets/img/ic_sleep_time.webp')" alt="" />
            </div>
            <p>定时关闭</p>
          </li>
        </ul>
      </div>
      <!-- 底部播放 end   -->
    </div>
  </div>
</template>

<script>
import { getJsonhomeType } from "../api/homeType.js";
export default {
  props:["icplay","outicplay"],
  data() {
    return {
     sleeplist:[],
     iconPlay:this.outicplay,
    };
  },
  methods:{
    change(){
      let index = parseInt(Math.random() * this.sleeplist.length);
        this.$emit("list-id", [1003, this.sleeplist[index].id]);
    },
    playsleep(){
      this.iconPlay=!this.iconPlay
      console.log(this.iconPlay);
      this.$emit("playsleep",this.iconPlay)
    }
  },
  created(){
     getJsonhomeType().then((data) => {
      let list = data.homeTypeLists.filter(item=>item.id==1003);
      console.log(list);
      this.sleeplist=list[0].listen
    });
  },
  watch:{
    "outicplay":function(){
        this.iconPlay=this.outicplay
    },
  }
};
</script>

<style lang="scss" scoped>
.sleep {
  height: 100%;
  background: url(../assets/img/gfdgd.webp);
  background-size: 100%;
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .breath{
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
      height: 100%;
      opacity: 0.4;
      animation: xuehua 6s linear infinite;
    }
    @keyframes xuehua{
      0%{
          opacity: 0;
      }
      50%{
        opacity: 0.6;
      }
      100%{
           opacity: 0;
      }
    }
    .header {
      color: #fff;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .header_left {
      img {
        height: 20px;
        display: block;
      }
    }
    .header_center {
      font-size: 18px;
      font-weight: 500;
    }
    .header_right {
      a {
        color: #3e3e3e;
        font-size: 17px;
        font-weight: 600;
      }
    }
    .listenNum {
      p {
        color: #fff;
        text-align: center;
        height: 224px;
        line-height: 224px;
      }
    }
    .play {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      ul {
        width: 290px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
          color: #fff;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          height: 70px;
          .img {
            img {
              display: block;
              height: 36px;
            }
          }
          .player {
            height: 70px;
            width: 70px;
            background-color: rgba(255, 255, 255, 0.299);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              height: 33px;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>